<template>
    <div class="in">
        <div class="index2">
            <div class="iin">
                <div class="index2_1">
                    <span class="ti1" v-for="i in Sub_route" :key="i" :style="[{borderBottom: name===i?'3px solid #00c3ff':''},{color: name===i?'#00c3ff':''}]" @click="route(i)">{{i}}</span>
                </div>
                <div class="index2_2">
                    <i class="el-icon-edit"></i>
                    <div>发布帖子</div>
                </div>
            </div>
        </div>
        <div class="index">
            <router-view />
            <!-- <LatestP :data1="pp"></LatestP> -->
        </div>
        <el-backtop :bottom="300" :right='300'> 
            <img src="../assets/img/top.png" alt="">
        </el-backtop>
    </div>
</template>

<script>
import LatestP from '../components/Strategy sub route/Latest post.vue'

export default {
    components: {LatestP},
    data() {
        return {
            name: '热门',
            Sub_route: ['最新发帖', '最新回复', '热门'],
            // pp: null
        }
    },
    methods: {
        route(i) {
            this.name = i
            if(i === '最新发帖') {
                this.$router.push('/TL2atest post')
                // this.pp = [{p: 11, n: 22}]
            }else if(i === '最新回复') {
                this.$router.push('/TL2atest reply')
                // this.pp = [{p: 99, n: 88}]
            }else if(i === '热门') {
                this.$router.push('/TH2ot')
            }
        }
    }
}
// mi_youshe
</script>
<style lang="less" scoped>
    .el-backtop img {
        max-width: 100px;
    }
    .in {
        width: 100%;
        background-color: #f7f5f5;
        .index {
            // border: 1px solid red;
            display: flex;
            margin-top: 80px;
            justify-content: center;
            // border: 1px solid red;
        }
        .index2 {
            // border: 1px solid red;
            opacity: 1;
            // position: absolute;
            z-index: 2;
            position: fixed;
            top: 120;
            width: 100%;
            background-color: white;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            .iin {
                // border: 1px solid red;
                width: 50%;
                height: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .index2_1 {
                    height: 100%;
                    // border: 1px solid black;
                    display: flex;
                    align-items: center;
                    span {
                        // border: 1px solid red;
                        display: flex;
                        align-items: center;
                        height: 100%;
                        margin-left: 10px;
                        font-size: 19px;
                        // color: rgb(0, 255, 255);
                        // border-bottom: 2px solid rgb(0, 255, 255);
                        cursor: pointer;
                    }
                }
                .index2_2 {
                    width: 120px;
                    background-color: #ffe14c;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-right: 30px;
                    padding: 10px;
                    font-weight: bolder;
                    border-radius: 5px;
                    cursor: pointer;
                    i {
                        font-size: 20px;
                    }
                }
            }
        }
    }
</style>